#{extends 'main.html' /}

<div id="principal" style="margin-top: -30px;padding-bottom:22px;">

<div id="zona_tabla">
<br>
<div id="titulo" style="width:725px;"><b>LISTADO DE ASIGNATURAS</b></div>
<br>
<br>
<table id="tabla"></table>
<div id="pager" style="text-align: center;"></div>

<div id=""></div>

</div>

<div id="zona_tabla_opciones">


<div id="tabs">

<ul>
<li><a href="#tabs-1">Modificar Datos</a></li>
<li><a href="#tabs-2">Actualizar</a></li>
<li><a href="#tabs-3">Busqueda</a></li>
</ul>

<div id="tabs-1">
<ul>
<li><a id="borrar" href="#">Borrar Curso</a></li>
<li><a id="adicionar" href="#">A&ntilde;adir Curso</a></li>
<li><a id="borrar_curso_server" href="#">Borrar Curso del Server</a></li>
</ul>
</div>

<div id="tabs-2">
<li><a id="actualizar" href="#">Actualizar Curso</a></li>
</div>

<div id="tabs-3">
<li><a id="busqueda" href="@{tablaBusquedaCurso(plan.id)}">Busqueda</a></li>
</div>

</div>

</div>

<div id="dialog_curso" style='display:none;'>
<div id="bloque_curso">
<div style="width:120px;float:left;"><label>Plan :</label></div><input type="text" id="nombreplan" style="width:240px;float:right;" />
</div>

<div id="bloque_curso">
<div style="width:120px;float:left;"><label>Curso :</label></div><input type="text" id="nombrecurso" style="width:240px;float:right;" /><div></div>
</div>

<div id="bloque_curso">
<div style="width:120px;float:left;"><label>Credito :</label></div><input type="text" id="numerocreditos" style="width:240px;float:right;" /><div></div>
</div>

<div id="bloque_curso">
<div style="width:120px;float:left;"><label>Codigo :</label></div><input type="text" id="codigocurso" style="width:240px;float:right;" /><div></div>
</div>

<div id="bloque_curso">
<div style="text-align: center;"><input type="submit" id="submit_adicionar" value="ADICIONAR" style="width:150px;"/></div>
</div>

</div>



</div>



<script type="text/javascript">

$(document).ready(function(){
	
	$('#tabla').jqGrid({
		url:'@{loadAsignaturas(plan.id)}',
		datatype:'JSON',
		mtype:'POST',
		colNames:['Numero','Curso','Codigo','Creditos','Plan'],
		colModel:[
		          {name:'id',index:'id',width:140,align:'left',resizable:true,editable:true},
		          {name:'nombrecurso',index:'nombrecurso',width:140,align:'right',resizable:true,editable:true},
		          {name:'codigocurso',index:'codigocurso',width:140,align:'right',resizable:true,editable:true},
		          {name:'numerocreditos',index:'numerocreditos',width:140,align:'right',resizable:true,editable:true},
		          {name:'plan',index:'plan',width:140,align:'right',resizable:true,editable:true}
		          ],
	    caption:'RELACION DE CURSOS',
	    rowNum:10,
	    rowList:[10,20,30],
	    height:300,
	    sortname:'id',
	    sortorder:'asc',
	    editurl:'@{Cursos.editarCurso()}',
	    pager:'#pager',
	    viewrecords:true,
	    jsonReader:
	    	{
	    		id:'0',
	    		repeatitems:false
	    	}
		
	});
	
	$('#tabla').jqGrid('navGrid','#pager',{edit:false,add:false,del:false});
	
	$('#tabs').tabs();
	
	$('#borrar').click(function(){
		var posicion=$('#tabla').jqGrid('getGridParam','selrow');
		$('#tabla').jqGrid('delRowData',posicion);
	});
	
	$('#borrar_curso_server').click(function(){
		$.post('@{borrarCursoServer(id)}',{
			id:$('#tabla').jqGrid('getGridParam','selrow')
		});
		
		$('#tabla').trigger("reloadGrid");
	});
	
	$('#adicionar').click(function(){
	$('#dialog_curso').dialog({
		modal:true,
		width:400,
		height:300,
		title:'A&ntildeadir Curso'
	});

	});
	
	$('#submit_adicionar').click(function(){
		var $numerocreditos=parseInt($('#numerocreditos').val());
		var $codigocurso=parseInt($('#codigocurso').val());
		$.post('@{registroDialogCurso(nombreplan,nombrecurso,numerocreditos,codigocurso)}',{
			nombreplan:$('#nombreplan').val(),
			nombrecurso:$('#nombrecurso').val(),
			numerocreditos:$numerocreditos,
			codigocurso:$codigocurso
		},function(){
			$('#tabla').trigger("reloadGrid");
		});
		
	});
	
	
	$('#actualizar').click(function(){
		var posicion=$('#tabla').jqGrid('getGridParam','selrow');
		$('#tabla').jqGrid('editGridRow',posicion,{
			width:220,
			height:250,
			modal:true,
			reloadAfterSubmit : true
		});
	});
	
	
	
});



</script>